<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>妙蛙种子教育管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }

        .layui-table-cell {
            height: auto;
            /*设置table的高度自适应*/
        }
        #searchStudentInformationForm  .layui-inline{
            width: 240px;

        }
        #searchStudentInformationForm   .layui-input-inline{
            width: 130px;
        }
        #formFileStudentInformation{
            display: none;
            width: 480px;
            float: left;
        }
    </style>
</head>
<body>
<!--筛选的 from表单-->
<div class="layui-form" id="searchStudentInformationForm" lay-filter="filter-searchStudentInformationForm"
     style="height:100px;border-bottom:solid 1px gainsboro;margin: -50px 0px 40px;padding-bottom: 10px; ">
    <div class="layui-inline" >
        <label class="layui-form-label">学号</label>
        <div class="layui-input-inline">
            <input type="text" name="id"  value=""  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">专业</label>
        <div class="layui-input-inline">
            <select name="professionId"  id="professionId" lay-search >
                <option ></option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <div style="width: 216px; margin: 60px;">
            <button type="button" class="layui-btn" lay-submit lay-filter="searchSubmitStudentInformation"
                    id="search-StudentInformation-submit"><i class="layui-icon  layui-icon-search"></i></button>
        </div>
    </div>
</div>

<!--1  新增 和批量删除-->
<div class="layui-card-body" style="margin: -28px;">
    <div style="padding-bottom: 10px; margin-left: 80px">
        <button class="layui-btn layuiadmin-btn-StudentInformation" data-type="batchdel">
            <i class="layui-icon  layui-icon-delete" ></i>批量删除</button>
        <button class="layui-btn layuiadmin-btn-StudentInformation" data-type="add">
            <i class="layui-icon  layui-icon-add-circle" ></i>添加</button>
    </div>
</div>
<!--表格  利用layui 给表格渲染数据  layui   lay-filter事件-->
<table id="table-StudentInformation" lay-filter="filter-StudentInformation"></table>
<!--内置按钮-->
<script type="text/html" id="table-rows-StudentInformation">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!--编辑  修改 和 新增-->
<form class="layui-form " id="StudentInformationForm" lay-filter="filter-StudentInformationForm"
      style="display: none;margin-left: 30%">
    <!--或者<form class="layui-form" action="">   readonly="readonly"-->
    <div class="layui-form-item">
        <label class="layui-form-label">学号</label>
        <div class="layui-input-inline">
            <input type="text" name="id" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <input type="radio" name="sex" value="1" title="男" checked>
            <input type="radio" name="sex" value="0" title="女" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">民族</label>
        <div class="layui-input-inline">
            <input type="text" name="national" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="idCard" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-inline">
            <input type="text" name="birthday" class="layui-input" id="StudentInformationBirthday">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">入学时间</label>
        <div class="layui-input-inline">
            <input type="text" name="startday" class="layui-input" id="StudentInformationStartTime">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属专业</label>
        <div class="layui-input-inline">
            <select name="professionId" lay-search id="auProfessionId" ></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属班级</label>
        <div class="layui-input-inline">
            <select name="classId" lay-search id="auClassId" ></select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电话号码</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="radio" name="state" value="0" title="在籍" checked>
            <input type="radio" name="state" value="1" title="休学" >
            <input type="radio" name="state" value="2" title="毕业" >
        </div>
    </div>

    <div class="layui-form-item  layui-hide">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSubmitStudentInformation"
                    id="form-StudentInformation-submit">修改</button>
        </div>
    </div>
    <div class="layui-form-item  layui-hide">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSubmitStudentInformation2"
                    id="form-StudentInformation-submit2">添加</button>
        </div>
    </div>
</form>

</body>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-1.8.2.js"></script>
<script>
    //layui使用方式
    //加载要使用模块
    layui.use(['element', 'table','form','laydate','layer'], function() {
        var table=layui.table,//表格
            form=layui.form,//表单
            layer=layui.layer,//弹框
            laydate=layui.laydate;//日期
        //执行一个laydate实例
        laydate.render({
            elem: '#StudentInformationBirthday' //指定元素
        });
        laydate.render({
            elem: '#StudentInformationStartTime' //指定元素
        });

        //表数据渲染   向后台请求数据  加载表格
        table.render({
            elem: '#table-StudentInformation' //那个table的id
            ,url: '../findStudentInformationServlet' //  这是一个 get请求 查询所有学生信息
            ,cellMinWidth: 50
            ,cols: [[ //解析json数据
                {
                    type: 'checkbox'
                }, {
                    field: 'id',title: '学号',sort: true
                }, {
                    field: 'name',title: '姓名'
                }, { field: 'sex',title: '性别',templet: function(thisRow){//rowData
                    if(thisRow.sex==1){//d.id    d.birthday
                        return '男';
                    }else if(thisRow.sex==0){
                        return  '女';
                    }else{
                        return '未知';
                    }
                }
                },{
                    field: 'startday',title: '入学日期'
                }, {
                    field: 'address',title: '籍贯'
                }, {
                    field: 'professionName',title: '专业'
                },{
                    field: 'className',title: '班级'
                },{
                    field: 'phone',title: '联系方式'
                },{ field: 'state',title: '状态',templet: function(thisRow){//rowData
                    if(thisRow.state==0){//d.id    d.birthday
                        return '在籍';
                    }else if(thisRow.state==1){
                        return  '休学';
                    }else{
                        return '毕业';
                    }
                }
                },{
                    title: '操作',align: 'center',fixed: 'right'
                    ,toolbar: '#table-rows-StudentInformation'//内置按钮的id  编辑 删除
                }
            ]
            ]
            ,page: true //是否开启分页
            ,limit: 10 //每页显示的条数   请求
            ,limits: [10, 50, 100] // 选择分页的显示条数
            ,height: 'full-200'
            ,text: '对不起，加载出现异常,请刷新试试。'
        });
        //ajax  渲染所有的 select 下拉框
        $.ajax({
            url:"../findAllProfession_Class_Servlet",//url请求地址 查询所有的专业名称班级名称
            type:"GET",//默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。
            // data://请求的数据
            dataType:"json",//返回的类型 dataType选项还可以指定其他不同数据处理方式
            //success回调函数  当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
            success:function(result){
                //result.data  //渲染select 下拉框

                var data=result.data;
                console.log(result.data);
                var selectProfessionId=$("#professionId");//筛选form 中的专业
                var selectauProfessionId=$("#auProfessionId");//编辑form 中的专业

                var selectClassId=$("select[name='classId']");//编辑form中 班级下拉框

                $.each(data[0].profession,function(i,obj){
                    //<option value=1> </option>

                    selectProfessionId.append("<option value="+obj.id+">"+obj.name+"</option>");
                    selectauProfessionId.append("<option value="+obj.id+">"+obj.name+"</option>");
                });
                //给编辑框的  班级下拉框做渲染
                $.each(data[0].classl,function(i,obj){
                    selectClassId.append("<option value="+obj.id+">"+obj.name+"</option>");
                });

                form.render('select');
                console.log(selectProfessionId.html());
            }
        });
        //表单的监听提交事件 (查询)  searchSubmitStudentInformation
        form.on('submit(searchSubmitStudentInformation)', function(data){
            // 事件里面要把table重新加载  where 携带参数
            var filed=data.field;//获得表单所有属性
            table.reload("table-StudentInformation",{where:filed});//自动渲染  请求 url  87行 再次执行 携带where:filed

        });


        //监听表格的内置 按钮（修改 删除）
        table.on('tool(filter-StudentInformation)', function(obj) {//obj.event  这一行数据 ob.data
            console.log(obj.data); //当前行的数据
            console.log(obj.data.birthday );
            console.log(obj.data.name); //当前行的数据
            console.log(obj.event); //当前点击事件的名称


            /*  laydate.render({
                  elem: '#StudentInformationBirthday'
                  ,value:obj.data.birthday //必须遵循format参数设定的格式
              });*/
            if(obj.event=="edit"){//打开 弹窗 内容时 编辑form

                //当前行的数赋值到表单中
                form.val("filter-StudentInformationForm",obj.data);
                form.val("filter-StudentInformationForm",{
                    "sex":obj.data.sex==0?"0":"1"
                });


                //打开一个弹框
                layer.open({
                    type: 1//类型 1：页面层 2：iframe层  content: 'http://sentsin.com'
                    , title: '编辑学生信息'//标题
                    , area: ['600px', '460px']//弹出框的宽高
                    , shade: 0.2//遮罩的透明度 0:为没有
                    , maxmin: true//是否有最大化
                    , offset: [ 100, 200  ]//坐标
                    , content: $("#StudentInformationForm")
                    , btn: ['修改'] //页面按钮  可以是多个['修改',’删除’,’关闭’]
                    , btnAlign: 'c' //按钮居中
                    , yes: function (index, layero) {
                        console.log("点击了修改按钮");
                        //触发表单提交的按钮事件
                        $("#form-StudentInformation-submit").trigger("click");
                        console.log("");
                        //当前页面刷新
                    }
                });
            }else if(obj.event=="delete"){

                layer.confirm('真的删除这行数据么？', function(index) {
                    //ajax请求后台servlet删除成功后
                    $.post("../deleteStudentByIdServlet", { "id": obj.data.id },
                        function(result){
                            if(result.code==0){
                                layer.alert("删除成功");
                            }else{
                                layer.alert("删除失败");
                            }
                        }, "json");
                    obj.del(); //在表格内移除
                    layer.close(index); //关闭提示窗口
                    /////////////////
                });

            }
        });

        //修改表单监控（修改）
        form.on('submit(formSubmitStudentInformation)', function(data) {
            var field = data.field; //获取提交的字段
            console.log(field);
            console.log("field.id修改"+field.id);
            $.post("../updateStudentInformationServlet", field,
                function(data){
                    if(data.code==0){
                        layer.alert("修改成功");
                    }else{
                        layer.alert("修改失败");
                    }
                },"json");
//            }

        });
        //添加
        //解析data-type的值,绑定对应的事件
        $('.layuiadmin-btn-StudentInformation').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //添加,批量删除按钮事件
        var active = {
            batchdel: function () {
                console.log("批量删除");
                //layui  方式
                var checkStatus = table.checkStatus('table-StudentInformation'),
                    checkData = checkStatus.data;//选中的数据
                if(checkData.length>0){
                    //可以批量删除

                    //直接删除
                    var idArr="";
                    $.each(checkData,function(i,obj){
                        idArr+=obj.id+",";

                    });
                    $.post("../batchDelStudentInformationServlet", {"idArr":idArr},
                        function(data){
                            if(data.code==0){
                                layer.alert("删除成功");
                                table.reload("table-StudentInformation");//id
                            }else{
                                layer.alert("删除失败");
                            }
                        },"json");//text

                    console.log(idArr);//id  后台

                }else{
                    layer.alert("请选中要删除的数据!!")
                }

                console.log(checkData.length);

            },
            //添加
            add: function () {
                //隐藏id
                //$("#displayIdNone.value").css("display","none");
                //表单的内容清空
                $("#StudentInformationForm")[0].reset();
                layui.form.render();
                layer.open({
                    type: 1,
                    title: "学生详情",
                    area: ['600px', '460px'],
                    btn: ['添加'], //弹出框的宽高
                    content: $("#StudentInformationForm"), //这里content是一个普通的String
                    //content: $('#id') //这里DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    yes: function(index, layero){
                        //触发表单提交
                        $("#form-StudentInformation-submit2").trigger('click');
                    }
                });
            }
        };
        form.on('submit(formSubmitStudentInformation2)', function(data) {//  新增和修改 都这跳到这里
            var field = data.field; //获取提交的字段
            console.log(field);
            console.log("field.id添加"+field.id);
            $.post("../addStudentInformationServlet", field,
                function(data){
                    if(data.code==0){
                        layer.alert("添加成功");
                    }else{
                        layer.alert("添加失败");
                    }
                },"json");//text
        });
    });

</script>
</html>